<!-- 购物车商品卡片 -->
<template>
    <section>
        <view class="cardBox" @tap="toDetail">
            <u--image width="140rpx" height="140rpx" :src="proItem.img" mode="widthFix" />
        	<view class="infoBox">
        		<view class="name">
        			{{proItem.name}}
        		</view>
        		<view class="priceNumBox">
					<text class="priceBox">
						<text class="unit">￥</text>
						<text class="price">{{proItem.price}}</text>
					</text>
					<text class="numBox">
						x{{proItem.num}}
					</text>
        		</view>
        	</view>
        </view>
        <u-divider />
    </section>
</template>

<script>
    export default {
        name:"productCard",
		props: {
			proItem: Object
		},
        data() {
            return {
                
            };
        },
		methods: {
            toDetail() {
                // 跳转详情页
                uni.navigateTo({
                    url: '/pages/productDetail/productDetail?productData=' + JSON.stringify(this.proItem)
                })
            }
		}
    }
</script>

<style lang="scss" scoped>
	.cardBox {
		margin: 20rpx 0;
		display: flex;
        align-items: center;
		.infoBox {
            flex: 1;
            height: 140rpx;
			margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
			.name {
				font-size: 28rpx;
				color: $uni-text-color-grey-6;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.priceNumBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.priceBox {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: bold;
					color: $uni-text-color-money;
					.unit {
						font-size: 24rpx;
					}
					.price {
						font-size: 36rpx;
					}
				}
				.numBox {
				    font-size: 28rpx;
				    color: $uni-text-color-grey-9;
				}
			}
			
		}
	}
</style>